<template>
	<div class="system-user-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="账户名称">
							<el-input v-model="state.ruleForm.account" placeholder="请输入账户名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="用户昵称">
							<el-input v-model="state.ruleForm.userName" placeholder="请输入用户昵称" clearable></el-input>
						</el-form-item>
					</el-col>
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="关联角色">
							<el-select v-model="state.ruleForm.roleSign" placeholder="请选择" clearable class="w100">
								<el-option label="超级管理员" value="admin"></el-option>
								<el-option label="普通用户" value="common"></el-option>
							</el-select>
						</el-form-item>
					</el-col> -->
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="部门">
							<el-cascader
								:options="state.deptData"
								:props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
								placeholder="请选择部门"
								clearable
								class="w100"
								v-model="state.ruleForm.department"
							>
								<template #default="{ node, data }">
									<span>{{ data.deptName }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col> -->
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="手机号">
							<el-input v-model="state.ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
						</el-form-item>
					</el-col>
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="邮箱">
							<el-input v-model="state.ruleForm.email" placeholder="请输入" clearable></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="性别">
							<el-select v-model="state.ruleForm.gender" placeholder="请选择" clearable class="w100">
								<el-option label="男" value="男"></el-option>
								<el-option label="女" value="女"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="账户密码">
							<el-input v-model="state.ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
						</el-form-item>
					</el-col>
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="账户过期">
							<el-date-picker v-model="state.ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
						</el-form-item>
					</el-col> -->
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="用户状态">
							<el-switch v-model="state.ruleForm.del" inline-prompt active-text="启" inactive-text="禁"></el-switch>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="座右铭">
							<el-input v-model="state.ruleForm.motto" type="textarea" placeholder="请输入座右铭" maxlength="150"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" style="display: none;">
						<el-form-item label="id">
							<el-input v-model="state.ruleForm.id" type="textarea" placeholder="编号" maxlength="150"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="systemUserDialog">
import axios from 'axios';
import { startCase } from 'lodash';
import api from "/@/api.js";
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
// 定义变量内容
const userDialogFormRef = ref();
const state = reactive({
	ruleForm: {
		account: '', // 账户名称
		userName: '', // 用户昵称
		phone: '', // 手机
		gender: '', // 性别
		password: '', // 账户密码
		del: '', // 账户状态
		motto: '', // 用户座右铭
		id:'',//编号
	},
	//deptData: [], // 部门数据
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

// 打开弹窗
const openDialog = (type, row) => {
	//console.log(row)
	if (type === 'edit') {
			state.ruleForm = row;
			state.dialog.title = '修改用户';
			state.dialog.submitTxt = '修 改';
			axios({
			method: 'get',
			url: api.commonUrl + '/user/getuserbyid?id=' + row.id,
			
		}).then(function (response) {
			if(response.data.code == 200){
				var user = response.data.data
				console.log(user)
				state.ruleForm.account = user.account;
				state.ruleForm.userName = user.userName;
				state.ruleForm.phone =user.phone;
				state.ruleForm.id = user.id;
				if(user.gender === "M"){
					state.ruleForm.gender = "男";
				}else{
					state.ruleForm.gender = "女";
				}
				state.ruleForm.password = "";


				
				//state.ruleForm.del = user.del;
				if(user.del === "1"){
					state.ruleForm.del = true;
				}else{
					state.ruleForm.del = false;
				}
				state.ruleForm.motto = user.motto;

			}else{
				ElMessage.error(response.data.message);
				return;
			}

		});
	} else {
		state.dialog.title = '新增用户';
		state.dialog.submitTxt = '新 增';
		// 清空表单，此项需加表单验证才能使用
		// nextTick(() => {
		// 	userDialogFormRef.value.resetFields();
		// });
		state.ruleForm = {
            account: '', // 账户名称
            userName: '', // 用户昵称
            phone: '', // 手机
            gender: '', // 性别
            password: '', // 账户密码
            del: '', // 账户状态
            motto: '', // 用户座右铭
            id:'',//编号
		}
	}
	state.dialog.isShowDialog = true;
	//getMenuData();
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {
	

	if(state.ruleForm.id === ''){
		// 新增
		axios({
		method: 'post',
		url: api.commonUrl + '/account/register',
		data:{
			account:state.ruleForm.account,
			userName:state.ruleForm.userName,
			phone:state.ruleForm.phone,
			password:state.ruleForm.password,
			gender:state.ruleForm.gender === '男'?'男':'女',
			del:state.ruleForm.del === true? "1":"0",
			motto:state.ruleForm.motto,
			avatar:"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80",
		}
	}).then(function (response) {
		if(response.data.code == 200){
			var user = response.data.data
			//ElMessage.success(response.data.message);
		}else{
			//ElMessage.error(response.data.message);
			alert(response.data.message);
			
		}
		emit('refresh');
	});
	}else{
		// 修改
		axios({
		method: 'post',
		url: api.commonUrl + '/user/updateuser',
		data:{
			id:state.ruleForm.id,
			account:state.ruleForm.account,
			userName:state.ruleForm.userName,
			phone:state.ruleForm.phone,
			password:state.ruleForm.password,
			gender:state.ruleForm.gender === '男'?'男':'女',
			del:state.ruleForm.del === true? "1":"0",
			motto:state.ruleForm.motto,
			avatar:"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80",
		}
	}).then(function (response) {
		if(response.data.code == 200){
			var user = response.data.data
			//ElMessage.success(response.data.message);
		}else{
			alert(response.data.message);
		}
		emit('refresh');
	});
	}
	
	closeDialog();
	//emit('refresh');

	// if (state.dialog.type === 'add') { }
};
// 初始化部门数据
const getMenuData = () => {
	state.deptData.push({
		deptName: 'vueNextAdmin',
		createTime: new Date().toLocaleString(),
		status: true,
		sort: Math.random(),
		describe: '顶级部门',
		id: Math.random(),
		children: [
			{
				deptName: 'IT外包服务',
				createTime: new Date().toLocaleString(),
				status: true,
				sort: Math.random(),
				describe: '总部',
				id: Math.random(),
			},
			{
				deptName: '资本控股',
				createTime: new Date().toLocaleString(),
				status: true,
				sort: Math.random(),
				describe: '分部',
				id: Math.random(),
			},
		],
	});
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
